<template>
  <!-- 订单详情 -->
  <div class="p-2">
    <div class="mb-[10px]">
      <el-card shadow="hover">
        <el-row :gutter="10" justify="space-between">
          <el-col :span="1.5">
            <div class="lioneuo">订单状态</div>
          </el-col>
          <el-col :span="1.5">
            <div class="tonseui">{{ oiundstuon(initForm.orderStatus) }}</div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="mb-[10px]">
      <el-card shadow="hover">
        <template #header>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <div class="lioneuo">订单信息</div>
            </el-col>
          </el-row>
        </template>
        <!-- 列表内容 -->
        <el-table :data="ordersListl" max-height="500" border>
          <el-table-column label="ID" prop="id" align="center" width="200" />
          <el-table-column label="订单编号" prop="sn" align="center" width="200" />
          <el-table-column label="用户id" prop="userId" align="center" width="200" />
          <el-table-column label="支付流水号" prop="outTradeNo" width="200" align="center" />
          <el-table-column label="商品成本价格" prop="costPrice" width="120" align="center" />
          <el-table-column label="总价格" prop="flowPrice" align="center" />
          <el-table-column label="支付方式" align="center">
            <template #default="scope">{{ tiomuonse(scope.row.payMethod) }}</template>
          </el-table-column>
          <el-table-column label="订单时间" align="center" width="230">
            <template #default="scope">
              <div class="huonseui">
                <div v-if="scope.row.payTime != ''">
                  支付时间：{{ scope.row.payTime }}
                </div>
                <div v-if="scope.row.completeTime != ''">
                  完成时间：{{ scope.row.completeTime }}
                </div>
                <div v-if="scope.row.cancelTime != ''">
                  取消时间：{{ scope.row.cancelTime }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="京东仓库编码" prop="warehouseCode" width="120" align="center" />
          <el-table-column label="创建时间" prop="createTime" width="160" align="center" />
        </el-table>
      </el-card>
    </div>

    <div class="mb-[10px]">
      <el-card shadow="hover">
        <template #header>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <div class="lioneuo">收件人信息</div>
            </el-col>
          </el-row>
        </template>
        <div class="lioneuos">
          <div>
            收件人姓名：{{ initForm.contactsName }}
          </div>
          <div>
            收件人手机：{{ initForm.contactsMobile }}
          </div>
          <div>
            详细地址：<span>{{ initForm.contactsAddress }}</span><span>{{ initForm.contactsDetail }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <div class="mb-[10px]">
      <el-card shadow="hover">
        <template #header>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <div class="lioneuo">商品信息</div>
            </el-col>
          </el-row>
        </template>
        <div class="lioneuos">
          <div>
            商品ID：{{ initForm.goodsId }}
          </div>
          <div>
            商品SN：{{ initForm.goodsSn }}
          </div>
          <div>
            商品名称：{{ initForm.goodsName }}
          </div>
        </div>
      </el-card>
    </div>
    <div class="mb-[10px]">
      <el-card shadow="hover">
        <template #header>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <div class="lioneuo">返佣信息</div>
            </el-col>
          </el-row>
        </template>
        <el-row :gutter="10" justify="space-between">
          <el-col :span="1.5" class="lioneuos">
            <div>
              卖家id：{{ initForm.sellerId }}
            </div>
            <div>
              寄卖差价：{{ initForm.saleRebate }}
            </div>
          </el-col>
          <el-col :span="1.5" class="lioneuos">
            <div>
              买家直推用户id：{{ initForm.directBuyerId }}
            </div>
            <div>
              买家直推返佣：{{ initForm.directBuyerRebate }}
            </div>
          </el-col>
          <el-col :span="1.5" class="lioneuos">
            <div>
              买家间推用户id：{{ initForm.indirectBuyerId }}
            </div>
            <div>
              买家间推返佣：{{ initForm.indirectBuyerRebate }}
            </div>
          </el-col>
          <el-col :span="1.5" class="lioneuos">
            <div>
              卖家直推用户id：{{ initForm.directSellerId }}
            </div>
            <div>
              卖家直推返佣：{{ initForm.directSellerRebate }}
            </div>
          </el-col>
          <el-col :span="1.5" class="lioneuos">
            <div>
              卖家间推用户id：{{ initForm.indirectSellerId }}
            </div>
            <div>
              卖家间推返佣：{{ initForm.indirectSellerRebate }}
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="Detail">
import { getdefuis } from '@/api/operates/order/index';
import { OrderVO } from '@/api/operates/order/types';

const route = useRoute()
const ordersListl = ref<OrderVO[]>([]);
// 解构赋值
const { params: { id } } = route
// 保存详情数据
const initForm = ref<OrderVO>({})

/**
 * 支付方式
 */
const tiomuonse = (val: string) => {
  if (val === 'BANK') {
    return '银行卡'
  } else if (val === 'WECHAT') {
    return '微信'
  } else if (val === 'ALIPAY') {
    return '支付宝'
  }
}

/**
 * 订单状态
 */
 const oiundstuon = (val: string | undefined) => {
    if (val === 'UNPAID') {
        return '未支付'
    } else if (val === 'DELIVER') {
        return '已发货'
    } else if (val === 'COMPLETE') {
        return '已完成'
    } else if (val === 'CANCEL') {
        return '已取消'
    }
}
/**
* 获取订单详情接口
*/
const getGoodsInfo = async () => {
  if (id) {
    const res = await getdefuis(id as string | number);
    initForm.value = res.data;
    ordersListl.value.push(res.data);
  }
}

onMounted(() => {
  getGoodsInfo()
});
</script>

<style scoped>
.tonseui {
  display: flex;
  justify-content: space-between;
}

.huonseui {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tonseui {
  color: #34df77;
  font-size: 20px;
  font-weight: 700;
}

.lioneuo {
  font-size: 17px;
  font-weight: 600;
}

.lioneuos {
  line-height: 30px;
  font-family: 楷体;
  font-size: 22px;
}
</style>